<template>
	<view>
		<home v-if="PageCur=='home'"></home>
		<order v-if="PageCur=='order'"></order>
	    <me v-if="PageCur=='me'"></me>
		<ball v-if="PageCur=='ball'"></ball>
		<view class="cu-bar tabbar bg-white shadow foot">
			<view class="action" @click="NavChange('home',$event)">
				<view class="cuIcon-cu-image">
					<image src="../../static/img/home.png"></image>
				</view>
				<view :class="PageCur=='home'?'text-green':'text-gray'">元素</view>
			</view>
			<view class="action" @click="NavChange('order',$event)">
				<view class="cuIcon-cu-image">
					<image src="../../static/img/order.png"></image>
				</view>
				<view :class="PageCur=='order'?'text-green':'text-gray'">组件</view>
			</view>
			<view class="action" @click="NavChange('me',$event)">
				<view class="cuIcon-cu-image">
					<image src="../../static/img/me.png"></image>
					<!-- <view class="cu-tag badge">99</view> -->
				</view>
				<view :class="PageCur=='me'?'text-green':'text-gray'">扩展</view>
			</view>
			<view class="action" @click="NavChange('ball',$event)" v-if="!prodEnv">
				<view class="cuIcon-cu-image">
					<image src="../../static/img/ball.png"></image>
					<!--<view class="cu-tag badge"></view> -->
				</view>
				<view :class="PageCur=='ball'?'text-green':'text-gray'">关于</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				PageCur: 'home'
			}
		},
		computed:{
			prodEnv(){
				return this.$ENV.prodEnv
			}
		},
		onLoad() {
			uni.hideHomeButton()
		},
		methods: {
			NavChange(tabname, e) {
				console.log(tabname, e)
				this.PageCur = tabname;
			}
		}
	}
</script>

<style>

</style>
